緣起

源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。

簡單來說就是設計奇奇怪怪的元件。

別看這些元件好像很沒用，實作起來反而更難啊！ᕕ( ﾟ ∀。)ᕗ

為了實現各類奇奇怪怪的需求，我們會結合各類知識或技術，從最基礎的三角函數、座標轉換，到物理引擎、Shader 等等。

大家如果有興趣的話，就和鱈魚一起來挑戰看看吧！(๑•̀ㅂ•́)و✧

好夥伴們

以下是此次專案主要使用的技術或框架。

Vue

主要只有元件開發部分，網站主體會交給 VitePress。

VueUse

基於 Vue 3 之 Composition API 的實用套件庫，此專案中會大量使用 VueUse API，讓程式碼簡潔漂亮。

VitePress

基於 Vite 的靜態網站產生器，本次專案我們會用此工具撰寫元件說明網站。

Vitest

基於 Vite 的測試框架，特色就是超級快，幾乎是按下儲存後，瞬間就跑完了。

Playwright

由微軟爸爸開源的 e2e 測試工具，主要用來測試網頁在瀏覽器上實際呈現的內容是否符合預期。

可以一次測試所有主流瀏覽器（包括 Chromium、WebKit 和 Firefox），很讚的酷東西。

其他相關套件就等到遇到的時候再來介紹囉。( ´ ▽ ` )ﾉ

計畫內容

專案架構如下：

• 使用 Vue 開發元件
• 利用 VitePress 撰寫文件網站
• 透過 Vitest 進行單元測試
• 透過 Playwright 進行 e2e 測試

每個元件開發包含以下段落：

• 需求與規格：詳細列出此元件的功能需求與需要達到的規格
• 開發與測試：設計、開發元件並進行單元測試
• 元件與範例：列出元件的各種展示範例
• e2e 測試：針對各種展示範例進行 e2e 測試

如果大家有興趣的話，最後加碼章節可以來寫將 Vue Component 編譯成 Web Component，這樣即使前端框架不同（甚至沒有框架），也可以直接使用這些酷酷的元件。

大家有興趣的話，歡迎留言告訴我喔。◝( •ω• )◟

行前須知

由於本篇不是基礎教學文，所以以下內容不會特別說明：

• HTML、CSS、JS 基本概念
• ES6 以上語法
• Vue 基本使用
• SFC、Composition API
• TypeScript 概念

此專案所有程式碼都會放在 GitLab 上讓大家下載，可以慢慢研究 ( •̀ ω •́ )✧

成果

本次專案預計會開發出類似下面連結的網站。

鱈魚的酷酷元件

那就讓我們開始吧！✧*｡٩(ˊᗜˋ*)و✧*｡